<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡(animation)</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box1{
            width:800px;
            height:800px;
            background-color: aqua;
            overflow: hidden;
        }
        .box1 div{
            width:100px;
            height:100px;
            margin-bottom:100px;
        }
        .box2{
            background-color: chartreuse;
            transition: height 2s;
/*第一遍理解记忆：2023-1-26*/
/*过渡(transition)：
1、概述：指定一个属性发生变化时的切换方式；通过过渡可以提升用户体验
2、属性：
（1） transition-property：
作用：指定要执行过渡的属性；
属性值：多个属性值间使用,隔开，若所有属性值都要过渡，则使用all关键字；大部分属性都支持过渡效果
注意：过渡时必须是从一个有效数值向另一个有效数值进行过渡*/
            transition-property: all;
/*（2）transition-duration：
作用：指定过渡效果的持续时间  
时间单位：s和ms
*/
            transition-duration: 2s;
/*（3）transition-timing-function
作用：指定过渡的时序函数，指定过渡的执行方式
可选值：ease默认值，慢速开始，先加速，再减速、linear匀速运动、ease-in加速运动、
       ease-out减速运动、ease-in-out先加速后减速、
*/
            /* transition-timing-function: ease; */
            /* transition-timing-function:linear; */
            /* transition-timing-function: ease-in; */
/*cubic-bezier()贝塞尔曲线，可以直接在网上生成该曲线
steps()：分步执行过渡效果；可以设置第二个值：end在时间结束时执行过渡（默认值）、start在时间开始时执行过渡*/
            /* transition-timing-function: cubic-bezier(.25,.1,.25,.1); */
            /* transition-timing-function: steps(2,end); */
            transition-timing-function: steps(2,start);
/*（4） transition-delay
作用：指定过渡效果的延迟，等待一段时间后执行过渡*/
            transition-delay: 2s;
/*3、简写属性
（1）创建：transition可以同时设置过度相关的所有属性，但是如果要写延迟，
则两个中时间中第一个是持续时间，第二个是延迟时间*/
            
        }
        .box3{
            background-color: deeppink;
            transition-property: all;
            transition-duration: 2s;
        }

        .box1:hover div{
            width:200px;
            height:200px;
            background-color: darkorange;
            margin-left:700px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>